hover:鼠标放到元素上的状态，最常见的状态；
active：点击时没有松开鼠标的状态，用得不多；
focus:输入框在获得焦点时的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css叠加性和层叠性</title>
<style type="text/css">
div:hover{color:red;font-size:30px;}
p:active{color:red;font-size:30px;}
#one:focus{color:red;font-size:30px;}
</style>
</head>
<body>
<div>我要好好学习</div>
<p>我要天天向上</p>
<input type="text" id="one" value="请输入">
</body>
</html>
将鼠标称到“我要好好学习”则字体会加红，点一下输入框，里面的提示文字会加红。